<template>
	<view class="conn">
		<navbox title="个人动态"></navbox>
		<view class="top" :style="{'background-image': 'url('+settting+')' }">
			<image :src="user.picUrl">
			</image>
		</view>
		<view class="con" v-if="!show1">
			<view class="u-page" v-for="item in fres" :key="item.id" style="margin-bottom: 60px;">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="albumavatar">
								<image :src="item.picUrl" mode="" style="width: 32px;height: 32px;" @click="getobj(item.userId)">
								</image>
							</view>
							<view class="album__content">
								<view style="display: flex;align-items: center;">
									<u--text :text="item.userName" type="primary" bold size="17"></u--text>
									<u-icon name="trash" color="#c6c6c6" size="24" @click="trash(item.id)"></u-icon>
								</view>
								<u--text margin="0 5 38px 0" size="19" :text="item.freDesc">
								</u--text>
								<u-album :urls="item.urls" multipleSize="70" singleSize="180"></u-album>
								<view
									style="display: flex;align-items: center;justify-content: space-between;margin-right: 30rpx;margin-top: 50rpx;">
									<view style="color: #adadad;">{{item.creatTime}}</view>
									<view style="display: flex;align-items: center;justify-content: flex-end;">
										<u-icon size="30" name="heart" @click="dian(item.id,item.colorAble)"
											:color="item.colorAble==='1'?'#ff2f06':''"></u-icon>
										<view style="width: 30rpx;"></view>
										<u-icon size="30" name="chat" @click="ping(item.id)"   v-if="user.frentLink!==5&&user!==''"></u-icon>
									</view>
								</view>
								<u-divider></u-divider>
								<view style="background-color: #fafafa;width: 100%;border-radius: 2px;"
									@click="turnTu(item.id)">
									<view v-if="item.goodsCount!==0"
										style="display: flex;align-items: center;justify-content: flex-start;margin-top: -15rpx;">
										<u-icon size="25" name="heart-fill"></u-icon>
<!-- 										<text v-for="itt in item.goods" :key="itt">{{itt}}</text>
 -->										<!-- <text> ,等{{item.goodsCount}}人觉得很赞</text> -->
										<view style="display: flex;align-items: center;justify-content: start;flex-wrap: wrap;">
												<text v-for="itt in item.goods" :key="itt">{{itt+','}}</text>
												<text> ,等{{item.goodsCount}}人觉得很赞</text>
										</view>
									</view>
									<view style="display: flex;align-items: center;justify-content: flex-end;"
										v-if="item.articleCount!==0">
										<u-icon size="25" name="chat-fill"></u-icon>
										<u--text :text="item.articleCount+'条评论回复' "></u--text>
									</view>
								</view>
							</view>
						</view>
						<view class="head" v-if="item.id===id">
							<view class="input">
								<view style="width: 80%;">
									<u-input placeholder="说点什么吧.." border="surround" v-model="value">
									</u-input>
								</view>
								<button @click="insertArticle(item.id)"
									style="width: 50px;height: 40px;background-color: #4891df;display: flex;align-items: center;justify-content: center;">
									<u-icon name="chat" color="#e3e3e3" size="28"></u-icon>
								</button>
							</view>
						</view>
						<view style="width: 100%;height: 10rpx;background-color: #f3f3f3;margin-top: 60rpx;"> </view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center" round="10" zoom="false">
			<view>
				<view style="display: flex;align-items: center;justify-content: flex-start;width: 520rpx;">
					<view style="margin-left: 50rpx;"></view>
					<u-image :src="userObj.picUrl" :lazy-load="true" mode="aspectFit" width="70" height="70"></u-image>
					<view style="margin-left: 32rpx;">
						<u--text type="primary" :text="userObj.nickName"></u--text>
						<view style="display: flex;align-items: center;justify-content: start;margin-top: 20rpx;">
							<u-tag :text="'Id:'+userObj.id" size="mini" type="warning"></u-tag>
						</view>
					</view>
				</view>
			  <view style="margin-left: 34rpx;margin-top: 20rpx;" v-if="userObj.phone">
			  	手机号：{{ userObj.phone}}
			  </view>
			  <view style="margin-left: 34rpx;margin-top: 20rpx;" v-if="userObj.email">
			  	邮箱：{{ userObj.email}}
			  </view>
				<view style="margin-left: 34rpx;margin-top: 20rpx;padding-bottom: 25rpx;">
					简介：{{userObj.userTab===''?'这个人很懒。什么都没写':userObj.userTab}}
				</view>
		
			</view>
		</u-popup>
		<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/message.png" v-if="show1">
		</u-empty>
	</view>
</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				userObj:{},
				timer: null,
				total: '',
				id: '',
				show1: false,
				show: false,
				albumWidth: 0,
				fres: [],
				show1: false,
				value: '',
				user: uni.getStorageSync("user"),
				settting: uni.getStorageSync("settings").frentBack,
				page: {
					userId: uni.getStorageSync("user").id,
					pageSize: 6,
					pageNum: 1,
				},
			}
		},
		onLoad() {
			if (this.timer) {
				clearTimeout(this.timer); // 清除定时器  
			}
			uni.showLoading({
				title: '加载中'
			});
			this.getList()
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.getList()
			this.timer = setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.getBottom()
		},
		methods: {
			async getobj(id) {
				const res = await this.$myRuquest({
					url: '/wexinLogin/getUser?userId='+id,
					method: 'post',
				})
				this.userObj=res.data.data
				this.show=true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			async getBottom() {
				const that = this
				if (this.fres.length < this.total) {
					this.page.pageNum++
					uni.showLoading({
						title: '加载中'
					});
					uni.request({
						url: that.$baseurl + "/wexinLogin/frents/listSi",
						method: 'POST',
						data: that.page,
						success(res) {
							that.fres = [...that.fres, ...res.data.data.data.records]
						}
					})

					uni.hideLoading();

				}
			},
			async trash(id) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					success: function(res) {
						console.log(id)
						if (res.confirm) {
							uni.request({
								url: that.$baseurl + '/wexinLogin/frents/delete?userId=' + that
									.user.id + '&frentId=' + id,
								method: 'post',
							})
							that.getList()
						} else if (res.cancel) {}
					}
				});
			},
			async insertArticle(frentsId) {
				const a = {
					preId: frentsId,
					userId: this.user.id,
					picUrl: this.user.picUrl,
					userName: this.user.nickName,
					content: this.value,
					parentId: ''
				}
				const res = await this.$myRuquest({
					url: '/wexinLogin/frents/insertArticle',
					method: 'post',
					data: a
				})
				this.getList()
				this.id = ''
			},
			ping(item) {
				this.id = item
				this.value = ''
			},
			async dian(frentsId, colorAble) {
				console.log(colorAble, frentsId)
				if (colorAble === "1") {
					const res = await this.$myRuquest({
						url: '/wexinLogin/frents/remGood?id=' + this.user.id + "&frentsId=" + frentsId,
						method: 'post',
					})
				} else {
					const a = {
						frentsId: frentsId,
						userId: this.user.id,
						userName: this.user.nickName,
					}
					const res = await this.$myRuquest({
						url: '/wexinLogin/frents/insertGood',
						method: 'post',
						data: a
					})
				}
				this.getList()
				console.log()
			},
			turnTu(id) {
				uni.navigateTo({
					url: '/pagesa/frentsdetail/frentsdetail?id=' + id
				})
			},
			async getList() {
				if (this.user === null || this.user === '') {
					this.show = false
					return uni.showToast({
						title: "token过期，重新登录",
						icon: 'none'
					})
				}

				const res = await this.$myRuquest({
					url: '/wexinLogin/frents/listSi',
					method: 'post',
					data: this.page
				})
				if (res.data.data.code !== 200) {
					return uni.showToast({
						title: "系统错误",
						icon: 'none'
					})
				}
				this.fres = res.data.data.data.records
				this.total = res.data.data.data.total
				uni.hideLoading();
				if (this.fres.length === 0) {
					this.show1 = true
				}
			}
		},
		components: {
			"navbox": navbox
		},
	}
</script>

<style lang="scss">
	.albumavatar {
	    padding: 5px;
	    border-radius: 3px;
	}
	.head {
		margin-top: 30rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		border: solid 1px #fff;

		.icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.input {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.conn {
		.top {
			margin-top: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 420rpx;
			background-image: url("https://www.10wallpaper.com/wallpaper/1280x800/1702/Rem_re_zero_girl-2016_Anime_HD_Wallpaper_1280x800.jpg");
			background-size: cover;
			// filter: blur(5px);

			image {
				border-radius: 5px;
				margin-top: 405rpx;
				margin-left: 65%;
				width: 130rpx;
				height: 130rpx;
			}
		}

		.con {

			border-radius: 20px;
			margin-top: 100rpx;
			margin-left: 30rpx;
			margin-right: 35rpx;

			.pinglun {
				height: 40rpx;
				background-color: #a495ee;
				border-radius: 4px
			}
		}
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>
